<template>
  <div>
    <div class="video-container">
      <video v-for="(videoUrl, index) in videoUrls" :key="index" :ref="`videoPlayer${index+1}`" class="video-player"
             controls autoplay></video>
    </div>
  </div>
</template>

<script>
import flvjs from 'flv.js';

export default {
  props: {
    row: {
      type: Object,
      required: true
    },
    videoUrls: {
      type: Array,
      required: true,
    },
    isPopupVisible:{
      type: Boolean,
      required: true,
    }
  },
  data() {
    return {
      clientId: this.row.clientId,
      videoElements: [],
      jt808Ip: 'http://192.168.20.77:8000',
      videoStreamIp:'112.232.252.74',
      videoStreamPort:'7613',
      onlineVideoRequestUrl: '/device/9101',
      controlOnlineVideoUrl: '/device/9102',
      flvPlayer: {},
      flvPlayerList:[]
    };
  },
  mounted() {
    console.log("创建")
    if (this.isPopupVisible) {
      this.requestOnlineVideo();
      this.initializePlayers();
    }
  },
  destroyed() {
    console.log("销毁")
    this.stopVideoStream()
    this.flvPlayerList.forEach(item=>{
      item.destroy();
    })
  },
  methods: {
    async stopVideoStream() {
      const requests = [];
      for (let i = 1; i <= 4; i++) {
        const param = {
          "clientId": this.clientId,
          "channelNo": i,
          "command": 2,
          "closeType": 0,
          "streamType": 0
        };
        requests.push(axios.post(this.jt808Ip + this.controlOnlineVideoUrl, param));
      }

      try {
        const responses = await Promise.all(requests);
        responses.forEach(response => {
          console.log(response.data);
        });
      } catch (error) {
        console.error(error);
        // 只打印一次错误信息
      }
    },
    async requestOnlineVideo() {
      const requests = [];
      for (let i = 1; i <= 4; i++) {
        const data = {
          "clientId": this.clientId,
          "ip": this.videoStreamIp,
          "tcpPort": this.videoStreamPort,
          "udpPort": this.videoStreamPort,
          "channelNo": i,
          "mediaType": 1,
          "streamType": 0
        };
        requests.push(axios.post(this.jt808Ip + this.onlineVideoRequestUrl, data));
        const param = {
          "clientId": this.clientId,
          "channelNo": i,
          "command": 3,
          "closeType": 0,
          "streamType": 0
        };
        requests.push(axios.post(this.jt808Ip + this.controlOnlineVideoUrl, param));
      }

      try {
        const responses = await axios.all(requests);
        responses.forEach(response => {
          console.log(response.data);
        });
      } catch (error) {
        console.error(error);
      }
    },
    initializePlayers() {
      this.videoElements = this.videoUrls.map((videoUrl, index) => {
        const videoElement = this.$refs[`videoPlayer${index + 1}`][0];
        let flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: videoUrl
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
        this.flvPlayerList.push(this.flvPlayer)
        return flvPlayer;
      });
    }
  }
};
</script>

<style scoped>
.video-container {
  display: flex;
  flex-wrap: wrap;
}

.video-player {
  width: 704px;
  height: 576px;
}
</style>
